<template>
  <div class="purchase-return-entry">
    <div class="date-range-search">
      <el-form :inline="true" class="search-form">
        <el-form-item label="单据号：">
          <el-input
            v-model="select.searchQuery"
            placeholder="请输入单据号"
          ></el-input>
        </el-form-item>

        <el-form-item label="单据日期:">
          <el-date-picker
            type="daterange"
            v-model="DjDateRange"
            align="right"
            unlink-panels
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleDateChange2"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="供应商(可多选)">
          <el-input
            style="width: 150px"
            v-model="name"
            placeholder="选择包含的供应商（最多三个）"
          ></el-input>
          <el-button style="margin: 0px" @click="dialogShow = true"
            >...</el-button
          >
        </el-form-item>

        <el-form-item label="商品:">
          <el-input
            v-model="select.goodcode"
            placeholder="请选择商品"
          ></el-input>
        </el-form-item>
        <el-button style="margin-left: -10px" @click="goodsShow = true"
          >...</el-button
        >

        <el-form-item>
          <el-button type="primary" @click="selectPage(1, 100)">查询</el-button>
          <!-- <el-button @click="advancedSearch">高级搜索</el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <el-divider></el-divider>

    <div class="actions">
      <el-button type="primary" @click="goto('PriceComparison')"
        >新增</el-button
      >
      <el-button>导入</el-button>
      <el-button>导出</el-button>
      <!-- <el-button>删除</el-button> -->
    </div>

    <el-table
      :data="pageInfo ? pageInfo.list : []"
      border
      style="width: 100%; font-size: 13px; margin-left: 20px"
      show-summary
      height="370px"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="操作" width="55">
        <template slot-scope="scope">
          <i class="el-icon-edit" @click="up(scope.row)"></i>&nbsp;
          <i class="el-icon-delete" @click="delPriCom(scope.row.id)"></i>
        </template>
      </el-table-column>

      <el-table-column
        prop="createDate"
        label="单据日期"
        width="200"
      ></el-table-column>

      <el-table-column
        prop="documentNumber"
        label="单据编号"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="yName"
        label="业务员"
        width="200"
      ></el-table-column>

      <el-table-column
        label="业务类别"
        width="200"
      >比价</el-table-column>
      <el-table-column
        prop="pro1Name"
        label="供应商1"
        width="250"
      ></el-table-column>
      <el-table-column
        prop="amount1"
        label="供应商1金额"
        width="250"
      ></el-table-column>

      <el-table-column
        prop="pro2Name"
        label="供应商2"
        width="250"
      ></el-table-column>
      <el-table-column
        prop="amount2"
        label="供应商2金额"
        width="250"
      ></el-table-column>

      <el-table-column
        prop="pro3Name"
        label="供应商3"
        width="250"
      ></el-table-column>
      <el-table-column
        prop="amount3"
        label="供应商3金额"
        width="250"
      ></el-table-column>

      <el-table-column prop="yName" label="业务员"></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column prop="singleName" label="制单人"></el-table-column>
      <el-table-column
        prop="dateOrder"
        label="制单时间"
        width="200"
      ></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
    </el-table>

    <el-pagination
      style="margin-left: 500px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo ? pageInfo.pageNum : 1"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="pageInfo ? pageInfo.pageSize : 100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo ? pageInfo.total : 0"
    >
    </el-pagination>

    <el-dialog top="20px" title="选择供应商" :visible.sync="dialogShow">
      <ProviderChoose ref="choosePro" :dialogShow="dialogShow" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="yes">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog top="20px" title="选择商品" :visible.sync="goodsShow">
      <GoodsChoose ref="chooseGoods" :goodsShow="goodsShow" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsShow = false">取 消</el-button>
        <el-button type="primary" @click="yesGoods">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import GoodsChoose from "../public_com/GoodsChoose.vue";
import ProviderChoose from "../public_com/ProviderChoose.vue";

export default {
  name: "priceComDoc",
  components: {
    GoodsChoose,
    ProviderChoose,
  },
  data() {
    return {
      select: {
        searchQuery: "",
        startDate2: "",
        endDate2: "",
        goodcode: "",
        pro1Id: "",
        pro2Id: "",
        pro3Id: "",
      },
      DjDateRange: [],
      name: "",
      goodsShow: false,
      dialogShow: false,
      pageInfo: null,
    };
  },
  methods: {
    delPriCom(id) {
      this.$confirm("删除该条比价单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .get("/purchase/priceComparison/delPriCom", {
              params: {
                id,
              },
            })
            .then((rs) => {
              if (rs.data.code == 200) {
                this.successMessage("删除成功");
                this.selectPage(1, 100);
              } else {
                this.errorMessage("删除出错了");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    successMessage(msg) {
      this.$message({
        message: msg,
        type: "success",
      });
    },
    errorMessage(msg) {
      this.$message({
        message: msg,
        type: "error",
      });
    },
    up: function (row) {
      this.$router.push({ name: "PriceComparison", query: { id: row.id } });
    },
    handleSizeChange(newSize) {
      console.log(`每页 ${newSize} 条`);
      this.findAll(1, newSize);
    },
    handleCurrentChange(newPage) {
      console.log(`当前页: ${newPage}`);
      this.findAll(newPage, this.pageInfo.pageSize);
    },
    handleDateChange2(value) {
      if (value) {
        this.select.startDate2 = value[0]; // 起始日期
        this.select.endDate2 = value[1]; // 结束日期
      } else {
        this.select.startDate2 = ""; // 起始日期
        this.select.endDate2 = ""; // 结束日期
      }
    },
    yes() {
      this.dialogShow = false;
      var list = this.$refs.choosePro.selectionList;

      if (list.length <= 0) {
        this.name = "";
        this.select.pro1Id = "";
        this.select.pro2Id = "";
        this.select.pro3Id = "";
        return;
      }

      this.select.pro1Id = list[0].providerId;
      this.select.pro2Id = list.length > 1 ? list[1].providerId : "";
      this.select.pro3Id = list.length > 2 ? list[2].providerId : "";

      this.name = list
        .slice(0, 3)
        .map((item) => item.providerName)
        .join(", ");
    },
    yesGoods() {
      this.goodsShow = false;
      var selectedGoods = this.$refs.chooseGoods.selectionList;
      console.log(selectedGoods);
      if (selectedGoods.length <= 0) {
        this.select.goodcode = "";
        return;
      }
      if (selectedGoods.length > 0) {
        this.select.goodcode = selectedGoods[0].goodcode;
      }
    },
    goto(to) {
      this.$router.push(to);
    },
    selectPage(pageNum, pageSize) {
      this.axios
        .get("/purchase/priceComparison/getPage", {
          params: {
            pageNum,
            pageSize,
            ...this.select,
          },
        })
        .then((rs) => {
          console.log(rs);
          if (rs.data.pageInfo) {
            this.pageInfo = rs.data.pageInfo;
          }
        });
    },
  },
  created() {
    this.selectPage(1, 100);
  },
};
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}

.actions {
  margin-top: 20px;
  text-align: right;
  margin-bottom: 10px;
}

.search-form .el-button {
  margin-left: 10px;
}
</style>